<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Data Table</title>

    <!-- ================= Favicon ================== -->

    <!-- Styles -->
    <link href="__VIS__/css/lib/font-awesome.min.css" rel="stylesheet">
    <link href="__VIS__/css/lib/themify-icons.css" rel="stylesheet">
    <link href="__VIS__/css/lib/menubar/sidebar.css" rel="stylesheet">
    <link href="__VIS__/css/lib/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="__VIS__/js/tree/jquery.treegrid.min.css">
    <link href="__VIS__/css/lib/unix.css" rel="stylesheet">
    <link href="__VIS__/css/style.css" rel="stylesheet">
    <style>
        .tb_img{
            width: 30px;
            height: 30px;
        }
        .pagination-detail .page-list .btn{
            background: transparent !important;
            color: #333333 !important;
        }
        .preview_btn{
            padding: 4px 12px !important;
            border: 1px solid #333;
            border-radius: 5px;
        }
    </style>
</head>

<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-8 p-r-0 title-margin-right">
            <div class="page-header">
                <div class="page-title">
                    <h1>管理员角色</h1>

                </div>
            </div>
        </div>
        <!-- /# column -->
        <div class="col-lg-4 p-l-0 title-margin-left">
            <div class="page-header">
                <div class="page-title">
                    <ol class="breadcrumb text-right">
                        <li><a href="#">管理员</a></li>
                        <li class="active" ><a href="{:url('index')}">管理员角色</a></li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- /# column -->
    </div>
    <!-- /# row -->
    <section id="main-content">
        <div class="row">
            <div class="col-lg-12">
                <div class="card alert">
                    <div class="card-header">
                        <h4>管理员角色</h4>
                        <div class="card-header-right-icon">
                            <ul>
                                <li class="card-close" data-dismiss="alert"><i class="ti-close"></i></li>
                                <li class="doc-link"><a href="#"><i class="ti-link"></i></a></li>
                                <li class="vis-re"><i class="fa fa-refresh"></i> 刷新数据</li>
                            </ul>
                        </div>
                    </div>
                    <div class="bootstrap-data-table-panel">
                        <div class="table-responsive">
                            <div class="table-toolbar">

                            </div>
                            <table id="row-select" class="display table table-borderd table-hover">
                                <a href="{:url('admin/role/edit')}" class="btn btn-default btn-outline"><i class="fa fa-plus"></i>添加角色</a>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- /# card -->
            </div>
            <!-- /# column -->
        </div>
        <!-- /# row -->


    </section>
</div>




<div id="search">
    <button type="button" class="close">×</button>
    <form>
        <input type="search" value="" placeholder="type keyword(s) here" />
        <button type="submit" class="btn btn-primary">Search</button>
    </form>
</div>
<!-- jquery vendor -->
<script src="__VIS__/js/lib/jquery.min.js"></script>
<script src="__VIS__/js/lib/jquery.nanoscroller.min.js"></script>
<!-- nano scroller -->
<script src="__VIS__/js/lib/menubar/sidebar.js"></script>
<script src="__VIS__/js/lib/preloader/pace.min.js"></script>
<!-- sidebar -->
<script src="__VIS__/js/lib/bootstrap.min.js"></script>
<script src="__VIS__/js/layer/layer.js"></script>
<!-- bootstrap -->

<!--<script src="__VIS__/js/scripts.js"></script>-->
<!--&lt;!&ndash;scripit init&ndash;&gt;-->
<!--<script src="__VIS__/js/lib/data-table/datatables.min.js"></script>-->
<!--<script src="__VIS__/js/lib/data-table/dataTables.bootstrap.min.js"></script>-->
<!--<script src="__VIS__/js/lib/data-table/dataTables.buttons.min.js"></script>-->
<!--<script src="__VIS__/js/lib/data-table/buttons.bootstrap.min.js"></script>-->
<!--<script src="__VIS__/js/lib/data-table/jszip.min.js"></script>-->
<!--<script src="__VIS__/js/lib/data-table/pdfmake.min.js"></script>-->
<!--<script src="__VIS__/js/lib/data-table/vfs_fonts.js"></script>-->
<!--<script src="__VIS__/js/lib/data-table/buttons.html5.min.js"></script>-->
<!--<script src="__VIS__/js/lib/data-table/buttons.print.min.js"></script>-->
<!--<script src="__VIS__/js/lib/data-table/buttons.colVis.min.js"></script>-->
<!--<script src="__VIS__/js/lib/data-table/datatables-init.js"></script>-->

<!--treetable-->
<script type="text/javascript" src="__VIS__/js/tree/bootstrap-table.js"></script>
<script type="text/javascript" src="__VIS__/js/tree/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript" src="__VIS__/js/tree/bootstrap-table-treegrid.js"></script>
<script type="text/javascript" src="__VIS__/js/tree/jquery.treegrid.min.js"></script>
<script>
    $(function () {
        var $table = $("#row-select");
        $table.bootstrapTable({
            url:"{:url('index')}",
            striped:true,
            sidePagenation:'server',
            search: true,
            pagination: true,
            showRefresh: true,
            pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
            pageSize: 10,                     //每页的记录行数（*）
            pageList: [10, 25, 50, 100],
            minimumCountColumns: 2,
            idField:'id',
            columns:[
                {
                    field: 'ck',
                    checkbox: true
                },{
                    field:'id',
                    title:'ID'
                },{
                    field:'name',
                    title:'角色名称'
                },{
                    field:'preview',
                    title:'拥有权限',
                    formatter:preview,
                    events : 'prew',
                },{
                    field:'desc',
                    title:'描述'
                },{
                    field:'create_time',
                    title:'创建时间'
                },{
                    field:'update_time',
                    title:'最后编辑时间'
                },{
                    field: 'operate',
                    title: '操作',
                    events : 'biEvents',
                    formatter: operatebtn
                }


            ],
        });

        function preview(value, row, index) {
            return "<a  class=' btn btn-default btn-outline preview_btn' href='#'>点击查看</a>";
        }

        function operatebtn(value, row, index) {
            return [
                '<a type="button" class="edit btn btn-small btn-outline" style="margin-right:5px;"><i class="fa fa-pencil-square-o" ></i></a>',
                '<a type="button" class="delete btn btn-small btn-outline" style="margin-right:5px;"><i class="fa fa-trash-o" ></i></a>'
            ].join('');

        }
        window.prew={
            'click .preview_btn':function (e, value, row, index) {
                var url="{:url('admin/role/preview')}?id="+row.id;
                layer.open({
                    type:2,
                    content:url,
                    title:'拥有权限',
                    area: ['550px', '400px']
                });
            }
        };
        window.biEvents = {

            'click .delete': function (e, value, row, index) {
                var id=row.id;
                layer.confirm('确定要删除?', function(index) {
                    $.ajax({
                        url:"{:url('admin/role/delete')}",
                        data:{id:id},
                        success:function(res) {
                            if(res.code == 1) {
                                layer.msg(res.msg,{icon:6},function () {
                                    window.location.href = res.url;
                                })
                            }else {
                                layer.msg(res.msg,{icon:5})
                            }
                        }
                    })
                })
            },
            'click .edit': function (e, value, row, index) {

                window.location.href="{:url('admin/role/edit')}?id="+row.id;
            }
        };

        $("button[name= 'refresh']").hide();
        $('.vis-re').click(function () {
            $("button[name= 'refresh']").click();
        })
    })

</script>
<script>

</script>
</body>

</html>